<template>
  <div class="upload-container">
    <template v-for="(items, indexs) in uploadTitle" :key="indexs" class="main">
      <div>
        <div class="border-box">
          <div class="border-left"></div>
          <div class="border-content">{{ items.zdmc }}</div>
          <div class="border-right"></div>
        </div>
        <div class="upload-box">
          <div style="width: 99.5%; overflow: overlay">
            <template v-for="(item, index) in items.fjxxInfoListsf" :key="index">
              <div
                v-if="item.sfyx != 0"
                style="padding: 8px; box-sizing: border-box"
                class="uploadbox"
              >
                <div style="display: flex" class="fileListbox">
                  <div style="width: 80%; color: #fff">
                    {{ item.fjmc }}
                  </div>
                  <div style="flex: 1; display: flex; justify-content: right; padding-right: 20px">
                    <div v-if="item.fjmc" class="uploadIcon-success"></div>
                    <div
                      v-if="item.fjmc"
                      class="uploadIcon-delete"
                      @click="deleteFile(indexs, index)"
                    ></div>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <el-upload
            ref="uploadRef"
            :http-request="handleChange"
            :before-upload="beforeUpload"
            multiple
            headers="Content-Type: multipart/form-data"
            :action="url"
            :auto-upload="true"
          >
            <div
              class="upload-button"
              style="cursor: pointer"
              @click="uploaClick(items, indexs, items.zddm)"
            >
              上&nbsp;&nbsp;传
            </div>
          </el-upload>
        </div>
      </div>
      <div
        style="
          width: 100%;
          height: 80px;
          display: flex;
          border: 1px solid #797979;
          padding: 5px;
          box-sizing: border-box;
          margin-bottom: 10px;
        "
      >
        <div
          style="
            width: 40px;
            line-height: 34px;
            color: yellow;
            font-size: 20px;
            text-align: center;
            border-right: 1px solid #797979;
          "
        >
          说 <br />
          明
        </div>
        <div style="color: yellow; padding-left: 10px">
          <p>{{ items.titles.title }}</p>
          <p>大小限制：{{ items.titles.title1 }}</p>
          <p>格式限制：{{ items.titles.title2 }}</p>
        </div>
      </div>
    </template>
  </div>
  <FileUploadTipConfirm :progress-percent="progressPercent" />
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { defineProps } from 'vue'
import { useChemicalStore } from '@/store'
import FileUploadTipConfirm from '@/components/FileUploadTipConfirm/index.vue'
import type { UploadInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { chemical_server } from '@/service'
import { queryZdZdmcInfo } from '@/service/api'
// const uploadTitle = ['平面图', '工艺图', '四色风险图', '消防系统图', '企业文档', '历史事故案例']
const isupload = ref(false)
const chemicalStore = useChemicalStore()
const uoloadFileIndex = ref()
const fjxxInfoListsf = ref([
  // {
  //   fjlx: '',
  //   fjmc: '',
  //   fjdz: '',
  //   sfyx: 1,
  //   ssid: chemicalStore.qyInfo.id,
  //   qyid: chemicalStore.qyInfo.id,
  // },
])
const dialogfjxxInfoList = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    ssid: chemicalStore.qyInfo.id,
    qyid: chemicalStore.qyInfo.id,
  },
])
const fjxxInfoList = ref(JSON.parse(JSON.stringify(props.uploadTitle)))
interface ResultType {
  result: {
    resultCode: string
    resultMessage: string
  }
  data: object
}
/** 适配接口返回结果 */
function adapter(response: ResultType) {
  if (response.result.resultCode == '000000') {
    return response.data
  }
  throw new Error()
}
const uploadNme = ref()
const fielIndex = ref()
// const url = 'http://192.168.40.186:9052/upload/path' //本地
// const url = 'https://njxfxcx.nj119.com.cn:8081/gw/file-service-unencrypted/upload/path' //上线打开
// let url = "http://192.168.1.114:9052/upload/path";
const url = window.app.config.globalProperties.$config.fileUploadUrl
const options = ref([])
const props = defineProps({
  uploadTitle: Array,
})
const uploadRef = ref<UploadInstance>()
const fjlxval = ref()
const config = {
  headers: { 'Content-Type': 'multipart/form-data' },
}
const emit = defineEmits(['uploadSuccess', 'uploadDelete'])
const queryXfbfxxInfo = (params?: any, config: any) =>
  chemical_server.post(`${url}`, params, config).then((res: any) => adapter(res as any))
//附件类型
function queryxk() {
  queryZdZdmcInfo({ key: 'fjlx' }).then((res: any) => {
    options.value = res
  })
}
function fileClick(index: any) {
  fielIndex.value = index
}
const progressPercent = ref(0) //上传进度条
const beforeUpload = (file: any) => {}
function handleChange(file: any, fileList: any) {
  if (!file.file) {
    return
  }
  const testmsg = file.file.name.substring(file.file.name.lastIndexOf('.') + 1)
  console.log(file.file.size)
  // debugger
  const isLt2M = file.file.size / 1024 / 1024 < 500
  if (
    uploadNme.value == '平面图' ||
    uploadNme.value == '工艺图' ||
    uploadNme.value == '四色风险图' ||
    uploadNme.value == '消防系统图'
  ) {
    if (testmsg !== 'jpg' && testmsg !== 'png' && testmsg !== 'pdf') {
      // console.log(uploadRef.value[uoloadFileIndex.value])
      // debugger
      uploadRef.value[uoloadFileIndex.value].clearFiles()
      ElMessage({
        message: '上传文件只能是 jpg/png/pdf格式!',
        type: 'warning',
      })
      return false
    }
  } else if (uploadNme.value == '企业文档' || uploadNme.value == '历年事故案例') {
    if (testmsg !== 'doc' && testmsg !== 'docx' && testmsg !== 'pdf') {
      // console.log(uploadRef.value[uoloadFileIndex.value])
      // debugger
      uploadRef.value[uoloadFileIndex.value].clearFiles()
      ElMessage({
        message: '上传文件只能是doc/docx/pdf格式!',
        type: 'warning',
      })
      return false
    }
  } else if (
    testmsg !== 'jpg' &&
    testmsg !== 'png' &&
    testmsg !== 'doc' &&
    testmsg !== 'docx' &&
    testmsg !== 'pdf'
  ) {
    // console.log(uploadRef.value[uoloadFileIndex.value])
    // debugger
    uploadRef.value[uoloadFileIndex.value].clearFiles()
    ElMessage({
      message: '上传文件只能是jpg/png/doc/docx/pdf格式!',
      type: 'warning',
    })
    return false
  }
  if (!isLt2M) {
    // console.log(uploadRef)
    // debugger
    uploadRef.value.map((item) => {
      item.clearFiles()
    })
    ElMessage({
      message: '上传文件大小不能超过 500MB!',
      type: 'warning',
    })
    return false
  }
  progressPercent.value = 0
  chemicalStore.fileUploadTipShow = true
  const config = {
    onUploadProgress: (progressEvent: any) => {
      // progressEvent.loaded:已上传文件大小
      // progressEvent.total:被上传文件的总大小
      progressPercent.value = Number(
        ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
      )
    },
  }
  const formData = new FormData()
  formData.append('multipartFile', file.file)
  formData.append('path', '/chemical-collect-service/fj/')
  queryXfbfxxInfo(formData, config)
    .then((res: any) => {
      props.uploadTitle[uoloadFileIndex.value].fjxxInfoListsf.push({
        fjdz: res.fileSaveName,
        fjmc: file.file.name,
        sfyx: 1,
        ssid: chemicalStore.qyInfo.id,
        qyid: chemicalStore.qyInfo.id,
        fjlx: fjlxval.value,
      })
      fjxxInfoList.value = JSON.parse(JSON.stringify(props.uploadTitle))
      emit('uploadSuccess', props.uploadTitle)
      chemicalStore.fileUploadTipShow = false
      // dialogfjxxInfoList.value[fielIndex.value].fjdz = res.fileSaveName
      // dialogfjxxInfoList.value[fielIndex.value].fjmc = file.name
    })
    .catch(() => {
      ElMessage.error('附件上传失败')
      chemicalStore.fileUploadTipShow = false //关闭上传文件进度 提示弹窗
    })
}
function uploaClick(item: any, index: any, val: any) {
  uoloadFileIndex.value = index
  uploadNme.value = item.zdmc
  fjlxval.value = val
  // isupload.value = true
}
function addUpload() {
  dialogfjxxInfoList.value.push({
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    ssid: chemicalStore.qyInfo.id,
    qyid: chemicalStore.qyInfo.id,
  })
}
function cancelClick() {
  isupload.value = false
}

function removefiles() {
  props.uploadTitle.map((item) => {
    item.fjxxInfoListsf.map((i) => {
      i.sfyx = 0
    })
  })
  emit('uploadDelete', props.uploadTitle)
}
function deleteFile(indexs: any, index: any) {
  // fjxxInfoList = JSON.parse(JSON.stringify(props.uploadTitle))
  fjxxInfoList.value[indexs].fjxxInfoListsf[index].sfyx = 0

  // props.uploadTitle[indexs].fjxxInfoListsf.splice(index, 1)
  props.uploadTitle[indexs].fjxxInfoListsf.splice(index, 1)
  emit('uploadDelete', fjxxInfoList.value)
}
function submit() {
  props.uploadTitle[uoloadFileIndex.value].fjxxInfoListsf = [
    ...dialogfjxxInfoList.value,
    ...props.uploadTitle[uoloadFileIndex.value].fjxxInfoListsf,
  ]

  isupload.value = false
  dialogfjxxInfoList.value = [
    {
      fjlx: '',
      fjmc: '',
      fjdz: '',
      sfyx: 1,
      qyid: chemicalStore.qyInfo.id,
    },
  ]
}
defineExpose({ fjxxInfoListsf, removefiles })

onMounted(() => {
  queryxk()
})
</script>

<style lang="less" scoped>
.fileListbox:hover {
  background: rgba(255, 255, 255, 0.2);
}
.fire-containers /deep/ .el-select .el-input__wrapper {
  width: 140px !important;
}

/deep/ .el-input {
  --el-input-focus-border-color: unset;
  --el-input-focus-border: unset;
  height: 34px;
}

/deep/ .el-input-group__append {
  border-left: 0;
  border-top-left-radius: 0;
  background: #02979b;
  border: 0px !important;
  /* line-height: 31px; */
  color: #fff;
  box-sizing: border-box;
}

/deep/ .el-input-group__append {
  border-left: 0;
  border-top-left-radius: 0;
  background: #02979b;
  border: 1px solid #6d6d6d;
  color: #fff;
}

/deep/ .el-icon svg {
  height: 0.7em;
  font-size: 18px;
  width: 1em;
  /* margin: 7px 0; */
}
/deep/ .el-input {
  border: 1px solid;
}
/deep/ .el-upload-list {
  /* margin: 10px 0 0; */
  padding: 0;
  /* list-style: none; */
  /* position: relative; */
  display: none;
}

/deep/ .el-upload:focus {
  border-color: var(--el-color-primary);
  color: #fff;
}

.xzbox {
  height: 36px;
  margin-top: 10px;
  background: rgba(109, 109, 109, 0.2);
  border: 1px dotted #6d6d6d;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
.uploadbox:hover .uploadIcon-success {
  display: none;
}
.uploadbox:hover .uploadIcon-delete {
  cursor: pointer;
  display: block;
}
.uploadIcon-success {
  width: 18px;
  height: 18px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(@/assets/image/common/correct-icon.png);
}
.uploadIcon-delete {
  width: 18px;
  height: 18px;
  display: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(@/assets/image/common/upload-delete.png);
}
.upload-container {
  position: relative;

  .fire-containers {
    width: 554px;
    background: #010711;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid #797979;
    position: absolute;
    top: 0%;
    right: 50%;
    padding: 20px;

    box-sizing: border-box;
    border: 8px solid rgba(255, 255, 255, 0.2);
    transform: translate(50%, 0);

    // background-color: hotpink;
    .fire-mains {
      max-height: 300px;
      overflow: auto;
    }
  }

  /deep/ .el-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    margin-top: 10px;
  }

  .m-2 {
    margin: 0;
  }

  .uploadbox {
  }

  .border-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 10px;

    .border-left,
    .border-right {
      width: 38%;
      height: 3px;
      background-color: #666;
    }

    .border-content {
      width: 100px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .upload-demo {
    width: 99.5%;
    height: 120px;
  }

  .upload-box {
    display: flex;
    position: relative;
    width: 99.5%;
    height: 120px;
    border: 1px solid rgba(109, 109, 109, 1);
    border-top: 1px solid transparent;
  }

  .upload-button {
    height: 100px;
    padding: 10px;
    border-radius: unset;
    width: 70px;
    border: unset;
    background-color: #02979b;
    font-size: 16px;
    text-align: center;
    line-height: 172px;
    margin-bottom: 10px;
    background-image: url(/src/assets/image/common/upload-icon.png);
    // background-size: 63% 60%;
    color: #fff;
    background-position: center 12px;
    background-repeat: no-repeat;
  }

  .el-upload-list {
    overflow: auto;
    height: 97px;
    width: 90%;
    margin-top: 13px;

    .el-upload-list__item {
      margin-bottom: 12px;
      width: 99%;

      .el-upload-list__item-name {
        height: 25px;

        .el-upload-list__item-file-name {
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
        }
      }

      .el-icon--close {
        background-color: red;
        border-radius: 50%;
      }

      &:hover {
        background-color: rgba(2, 151, 155, 0.4);
      }
    }
  }
}
</style>
